import React, { Component } from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import Message from "./Message";
import News from "./News";
import MyNavLink from '../MyNavLink';

export default class Home extends Component {
  render() {
    return (
      <>
        <h3>我是Home的内容</h3>
        <div>
        <ul className="nav nav-tabs">
            <li>
            {/* <a className="list-group-item active" href="./home-news.html">News</a> */}
            {/* 
                v6版本的一级路由需要写为 path/*  开启二级路由匹配
                且二级路由直接写地址 不需要加/ 和父级路由  ex: 不用写成 /home/news
            */}
              <MyNavLink to="news">News</MyNavLink>
            </li>
            <li>
            {/* <a className="list-group-item " href="./home-message.html">Message</a> */}
              <MyNavLink to="message">Message</MyNavLink>
            </li>
            <li>
              <MyNavLink to="2341234">Message</MyNavLink>
            </li>
        </ul>
            {/* 路由注册 */}
            <Routes>
                <Route path="news" element={<News />} ></Route>
                <Route path="message/*" element={<Message />} ></Route>
                <Route path="*" element={<Navigate to="/home/news" />}/> 
            </Routes>
        </div>
      </>
    )
  }
}
